<script type="text/javascript" src="/resource/js/jquery.dragsort-0.5.2.min.js"></script>

<style>
.color-yellow{color:yellow;}
.show-subname{width: 100px;position: absolute;top: 0px;left: 200px;background: rgba(0,0,0,0.5);border-radius: 5px;z-index: 99;font-size: 12px;word-break: break-all;line-height:15px;padding: 5px;}
/* lvx-jingd start */
.lx_jingd { width: 700px; height: 350px; border: 1px solid  #dcdcdc; margin-left: 185px; }
.lx_jingd .sidebar { width: 325px; height: 348px; float: left; border-right: 1px solid  #dcdcdc; }
.lx_jingd .sidebar .search { height: 38px; line-height: 38px; background: url(/resource/www/imgs/search_icon.png) 10px 10px no-repeat; padding-left: 30px; }
.lx_jingd .sidebar .search input { display: block; width: 100%; height: 38px; }
.lx_jingd .sidebar .group-wrap { position: relative; overflow: auto;  height: 310px;  }
.lx_jingd .main { width: 373px; float: left; height: 348px; overflow: auto; }
/* lvx-jingd end */

.scenic { position: relative; }
.scenic .name { display: inline-block; }
.scenic .stip {  display: none; position: absolute; width: 60px; height: 60px; top: 0; left: 0;font-size: 12px; text-align: center; line-height: 60px; background-color: #000;color:#fff;opacity:0.5;border-radius:60px; }
.items { height: 300px;padding-left: 30px; }
.items li { display: inline-block; width: 60px; margin: 0 20px 20px 0 ; }
.items .name { display: none;text-align:center;position:absolute;top:65px;left:0;font-weight:bold;width:60px; }
.items .icon {  width: 60px; height: 60px; border-radius: 50%; }

#set-scenic-attr { display: none; background: #fff;  width: 550px; height: 370px; border-radius: 5px; padding: 40px 0 0 0; }
#set-scenic-attr .stitle{text-align: center;font-size: 20px;position: relative;top: -20px;}
#set-scenic-attr .hang { font-size: 16px; margin-bottom: 30px; }
#set-scenic-attr .span { float: left; width: 105px; text-align: right; padding-right: 10px; line-height: 40px; }
#set-scenic-attr .input { float: left; width: 150px; height: 40px; padding-left: 32px; line-height: 38px; border: 1px solid  #dcdcdc; background: url(/resource/www/imgs/time_icon.png) 110px 12px no-repeat; }
#set-scenic-attr .textarea { line-height: 24px; padding: 5px 10px 0 10px; float: left; width: 406px; height: 150px; border: 1px solid  #dcdcdc; border-radius: 2px; overflow: hidden; }
#set-scenic-attr .bottom {  width: 320px; height: 32px; line-height: 32px; font-size: 14px; margin: 40px 0 0 105px; text-align: center; color: #fff; }
#set-scenic-attr .cancel { float: left; width: 160px; background: #b3b3b3; }
#set-scenic-attr .ok { float: left; width: 160px; height: 32px; background: #46d08b; color: #fff; }

.group { color: #fff; font-size: 16px; }
.group .arrow { float: left;  width: 13px; height: 13px; margin: 15px 0 0 10px; }
.group .icon {  float: left; width: 24px; height: 24px; margin: 7px 10px 0 10px; border-radius: 50%; }
.group span {  float: left; }
.group .head { background-color: #3eaf8d; height: 39px; line-height: 38px; cursor: pointer; border-top: 1px solid  #dcdcdc;}
.group .group-active{display:block;}
.group ul {display:none;}
.add-scenic .scenicbox{display:block;}
.group .scenicbox li { background-color: #26DFA0; padding-left: 22px; height: 39px; line-height: 38px; border-top: 1px solid  #dcdcdc;}

.daysbox .day{display:none}
.days-btn{height:30px;line-height:20px;width:60px;background-color:#444;border:none;border-radius:3px;color:#fff;text-align:center;font-size:15px;margin:10px 5px 15px 0px;}
.days-btn1{background-color:#fff;color:#444;border:1px solid #444;margin-left:20px;}
</style>

<script>

var global_scenic_id = null;
var global_scenic_item = null;
var global_scenic_type = null; 
var global_layer_index = null;

/*---行程框---*/
//切换日期
function change_day_list(dayindex){
	$(".days-btn").css({'color':'#fff','background-color':'#444','border':'none'});
	$(".days-btn"+dayindex).css({'color':'#444','background-color':'#fff','border':'1px solid #444'});
        $(".day").css('display','none');
	$(".day"+dayindex).css('display','block');
}
function callback_scenic_mouseover()
{
    $(this).find('.stip').show();
    $(this).find('.name').show();
}

function callback_scenic_mouseout()
{
    $(this).find('.stip').hide();
    $(this).find('.name').hide();
}

/*---景点列表---*/
// 展开group
function group_expand (item)
{
    $('.group').each (function () {
        if ($(this).find('p').get(0) == item)
       {
            if($(this).find('ul').hasClass("group-active")){
            $(this).find('ul').removeClass("group-active");
            $(this).find('.arrow').attr('src', '/resource/www/imgs/lx_jd_up.png');
            }
            else{$(this).find('ul').addClass("group-active");$(this).find('.arrow').attr('src', '/resource/www/imgs/lx_jd_down.png');} 
       }
    });
}

function callback_scenic_mouseenter()
{
	$('.group-wrap .subname').addClass('hidden');
    $(this).find('.subname').removeClass('hidden');
}


/*---设置元素被拖动后的响应---*/
function itemEndSelect() {
	//pos=1:移动之前在景点列表
    if ($(this).attr('pos')=="1")
    {
        //移动到行程框
        if($(this).parent().hasClass("items")){
        	$(this).attr('pos',"2");
            
        	global_scenic_id = $(this).attr('scenicId');
            global_scenic_item = this;

            var dayNo = $(this).parent().attr('dayNo');
            $(this).find('input').removeAttr('disabled');
            $(this).find('input').attr('name', 'scenic_' + global_scenic_id + '_' + dayNo);
            $(this).find('.name').css('color','#000');
            // 点击时，编辑活动属性
            //2:移动弹出景点编辑框，1:点击弹出景点编辑框
            $(this).find('.subname').addClass('hidden');
            $(this).unbind('mouseenter');
            callback_scenic_clicked(this,2);
        }        
    }
    //pos=2:移动之前在行程框
    else
    {
    	//移动到行程框外
    	if(!$(this).parent().hasClass("items")){
    		var id=$(this).attr('scenicId');
        	var type=$(this).attr('scenicgrp');
        	var iconUrl=$(this).find('img.icon').attr('src');
        	var name=$(this).find('.name').html();
        	var subTitle=$(this).find('.subname').html();
        	$(this).remove();
        	
        	callback_scenic_add_new(id, type, name, subTitle, iconUrl);
    	}
    	//在行程框内移动
    	else{
    		//保证添加图标始终在最后
            $(this).parent().find("li.add-icon").remove();
            var html="<li class='add-icon'><img src='/resource/www/imgs/jia.png' class='icon'></li>";
            $(this).parent().append(html);
    	}   	
    }
}

/*---景点编辑---*/
//弹出弹窗
function callback_scenic_clicked(item,cancelType)
{
    layer.closeAll();

            global_scenic_id = $(item).attr('scenicId');
            global_scenic_type = $(item).attr('scenicgrp');
            global_scenic_item = $(item);

            var val = $(item).find('input').val();
            var its = {};
            if(!val){
            	its = {startTime:'',stopTime:'',desc:''};
            }else{
            	its = JSON.parse(val);
            }
                        
            var scenictitle=$(item).find('.name').html();
            //初始化景点属性弹窗
            var formItem = document.forms['formAttr'];            
            $(formItem).find('.stitle').empty();
            $(formItem).find('.stitle').html(scenictitle);
            //stype=1:点击弹出弹窗
            //stype=2:移动弹出弹窗
            $(formItem).find('.stype').empty();
            $(formItem).find('.stype').html(cancelType);
            $(formItem).find('.sid').empty();
            $(formItem).find('.sid').html(global_scenic_id);
            $(formItem).find('select[name=startTime]').val(its.startTime);
            $(formItem).find('select[name=stopTime]').val(its.stopTime);
            $(formItem).find('textarea').val(its.desc);

            global_layer_index = layer.open({
                type : 1,
                closeBtn: 0,
                title : false,
                area: ['550px', '400px'],
                content : $('#set-scenic-attr'),
            });
}
//点击提交
function submit_scenic_attr() {

    var oStartTime = $('#set-scenic-attr').find("select[name='startTime']").val();
    var oStopTime = $('#set-scenic-attr').find("select[name='stopTime']").val();
    var desc = $('#set-scenic-attr').find("textarea[name='desc']").val();

    if (!$.trim(desc)) {
        layer.msg('请说点什么');
        return false;
    }
}
//设置景点的属性
function form_scenic_attr (formItem)
{
    var startTime = $(formItem).find('select[name=startTime]').val();
    var stopTime = $(formItem).find('select[name=stopTime]').val();
    var desc = $(formItem).find('textarea').val();

    layer.close(global_layer_index);

    var arrval = {
        startTime : $.trim(startTime),
        stopTime  : $.trim(stopTime),
        desc      : desc
    };

    var val = JSON.stringify(arrval);
    $(global_scenic_item).find('input').val(val);
    return false;
}
//点击取消
function scenic_cancel(){
	var sid=$('#set-scenic-attr').find('.sid').html();
	var stype=$('#set-scenic-attr').find('.stype').html();
	//1:点击弹出，2:移动弹出
	if(stype==1){
		layer.close(global_layer_index);
	}else{
		layer.close(global_layer_index);
		var type=$('.scenic[scenicId='+sid+']').attr('scenicgrp');
		var name=$('.scenic[scenicId='+sid+']').find('.name').html();
		var subTitle=$('.scenic[scenicId='+sid+']').find('.subname').html();
		var iconUrl=$('.scenic[scenicId='+sid+']').find('img.icon').attr('src');
		$('.scenic[scenicId='+sid+']').remove();
		callback_scenic_add_new (sid, type, name, subTitle, iconUrl);
	}
}


/*---自定义景点---*/
//弹出弹窗
function scenic_add_new ()
{
    global_layer_index = layer.open({
        type : 2,
        title : false,
        fix: false,
        content: ['/scenicspot/iframe_add/<{$trackid}>', 'no'],
        area: ['700px', '850px'],
    });
}
//景点列表生成景点
function callback_scenic_add_new (id, type, name, subTitle, iconUrl)
{
    var str = '<li class="scenic" scenicId="'+id+'" scenicgrp="'+type+'" pos="1">' +
            '<img src="'+iconUrl+'" class="icon">' +
            '<div class="name">'+name+'</div>' +
            '<div class="subname hidden show-subname">'+subTitle+'</div>'+
            '<input type="hidden" name="scenic_'+id+'" value="" disabled="disabled">' +
            '<span class="stip">编辑</span>' +
            '</li>';

    $('.grp'+type+' ul').prepend(str);
}


$(document).ready(function () {

	$(".scenicbox, .items").dragsort({ dragSelector: "li", dragSelectorExclude: ".custom,.add-icon", dragBetween: true, dragEnd: itemEndSelect, placeHolderTemplate: "" });

    /* $('.daysbox .scenic').each (function () {
        $(this).click(function(){callback_scenic_clicked(this,1);});
        $(this).mouseover(callback_scenic_mouseover);
        $(this).mouseout(callback_scenic_mouseout);
    }); */
    $('.daysbox').delegate(".scenic","click",function(){
    	callback_scenic_clicked(this,1);
    });
    $('.daysbox').delegate(".scenic","mouseover",callback_scenic_mouseover);
    $('.daysbox').delegate(".scenic","mouseout",callback_scenic_mouseout);
    
    $('.group-wrap').delegate(".scenic","mouseenter",callback_scenic_mouseenter);

    $('.group-wrap').mouseover(function() {
        $(this).css('position', 'static');
    });
    $('.group-wrap').mouseout(function() {
        $(this).css('position', 'relative');
    });


    // 从景点里搜索
    $('.search input').on('keyup', function () {
        var val = $(this).val();
        var find = 0;
        if (val)
        {   
        	//汉语搜索
	        $('.group .name').each(function () {
	            if ($(this).text().indexOf(val) >= 0)
	            {
                    // 已找到
                    find = 1;
                    $('.group .name.color-yellow').removeClass("color-yellow");
                    $(this).addClass('color-yellow');
                    // 展开
                    var head = $(this).parent().parent().parent().find('.head').get(0);
                    if(!$(this).parent().parent().hasClass('group-active')){
                    	group_expand(head);  
                    }                    
                    //定位
                    var oTop1 = $('.group-wrap .group').first().offset().top;
                    var oTop2 = $(this).parent().offset().top;
                    var oTop=oTop2-oTop1;
                    $(this).parents('.group-wrap').scrollTop(oTop);
                    // 停止循环
                    return false;
	            }
	        });
        	
        	if(find==0){
        		//外文搜索
    	        val=val.toUpperCase();
    	        $('.group .subname').each(function () {
    	            if ($(this).text().toUpperCase().indexOf(val) >= 0)
    	            {
                        // 已找到
                        find = 1;
                        $('.group .name.color-yellow').removeClass("color-yellow");
                        $(this).parent().find('.name').addClass('color-yellow');
                        // 展开
                        var head = $(this).parent().parent().parent().find('.head').get(0);
                        if(!$(this).parent().parent().hasClass('group-active')){
                        	group_expand(head);  
                        }                    
                        //定位
                        var oTop1 = $('.group-wrap .group').first().offset().top;
                        var oTop2 = $(this).parent().offset().top;
                        var oTop=oTop2-oTop1;
                        $(this).parents('.group-wrap').scrollTop(oTop);
                        // 停止循环
                        return false;
    	            }
    	        });
        	}
        }
    });

   $('.diy-text').mouseover(function(){
    	$('.diy-notice').fadeIn();
        $(this).css({'border-color':'#00c581','border-style':'solid','border-width':'1px'});
    });
    $('.diy-text').mouseout(function(){
    	$('.diy-notice').fadeOut();
        $(this).css('border','none');
    });
});
</script>

<div class="li fix" style="margin-bottom: 10px;">
    <span class="text">行程制定</span>
    <div class="zhid">
        <p class="prompt">请将左侧景点列表中的景点拖入到右侧行程单对应日期下的<img src="/resource/www/imgs/jia.png" style="width:20px;height:20px;display:inline;margin:0px 2px">中</p>
    </div>
    <div class="diy-btn">
    <div onclick="scenic_add_new()" class="diy-text">
     添加自定义景点
    </div>
    <div class="diy-notice">
    如果您在景点列表中没有找到所需的景点，可以选择自定义添加景点，不论是餐馆、
    咖啡厅，还是某条不知名的小路，您都可以通过自个性化的编辑呈现给游客。添加后的景点会出现在《您的自定义景点》列表中。
    </div>
    </div>
</div>

<div class="lx_jingd fix">

    <div class="sidebar">

        <div class="search">
            <input type="text" name="key" placeholder="查找">
        </div>

        <div class="group-wrap">

            <{foreach from=$scenicList item="scenics" name="group"}>
            <div class="group grp<{$scenics.typeId}>">
                <p class="head fix"  onclick="group_expand(this)">
                    <img src="/resource/www/imgs/lx_jd_up.png" class="arrow">
                    <img src="/resource/www/imgs/icon/<{$scenics.typeId}>.png" class="icon">
                    <span><{$scenics.typeName}></span>
                </p>

                <ul class="scenicbox">
                    <{foreach from=$scenics.scenics item="scenic"}>
                    <li class="scenic" scenicId="<{$scenic.id}>" scenicgrp="<{$scenic.type}>" pos="1">
                        <img src="<{$scenic.iconUrl}>" class="icon">
                        <div class="name"><{$scenic.name}></div>
                        <div class="subname hidden show-subname"><{$scenic.subTitle}></div>
                        <input type="hidden" name="scenic_<{$scenic.id}>" disabled="disabled">
                        <div class="stip">编辑</div>
                    </li>
                    <{/foreach}>
                </ul>
            </div>
            <{/foreach}>

        </div>

    </div>

    <div class="main">
        <div class="daysbox">
            <{foreach from=$daysList key="dayIndex" item="dayList"}>
             <button type="button" class="days-btn days-btn<{$dayIndex}>" onclick='change_day_list(<{$dayIndex}>)'>第<{$dayIndex}>天</button>
            <{/foreach}>
            
            <{foreach from=$daysList key="dayIndex" item="dayList"}>
             <{if $dayIndex==1}>
            <div class="day day<{$dayIndex}>" style="display:block;">
            <{else}>
            <div class="day day<{$dayIndex}>">
            <{/if}> 
                <ul class="items" dayNo="<{$dayIndex}>">
                <{foreach from=$dayList item="scenic"}>
                    <li class="scenic" scenicId="<{$scenic.scenicId}>" scenicgrp="<{$scenic.type}>" pos="2">
                        <img src="<{$scenic.iconUrl}>" class="icon">
                        <div class="name"><{$scenic.name}></div>
                        <div class="subname hidden"><{$scenic.subTitle}></div>
                        <input type="hidden" name="scenic_<{$scenic.scenicId}>_<{$dayIndex}>" value='<{$scenic.jsonValue}>'>
                        <div class="stip">编辑</div>
                    </li>
                <{/foreach}>
                <li class="add-icon"><img src="/resource/www/imgs/jia.png" class="icon"></li>
                </ul>
            </div>
            <{/foreach}>
            <span id="days_nums" style="display: none"><{$dayIndex}></span>
        </div>
    </div>
</div>
